<template>
	<view>

		<!-- 搜索框，无论什么组件，给他包一层，让他改变 -->
		<view class="serch_board">
			<u-search shape="round" height="70" :show-action="true" :animation="true" @custom="doSearch"
				@search="doSearch" v-model="keyword" bgColor=" #FFFFFF"></u-search>
		</view>

		<view class="title" style="margin-bottom: 10rpx;"> 2022年 </view>

		<view>
			<!-- 要多个tab才有蓝色下划线 -->
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
			                color: '#303133',
			                fontWeight: 'bold',
			                transform: 'scale(1.05)'
			            }" :inactiveStyle="{
			                color: '#606266',
			                transform: 'scale(1)'
			            }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</u-sticky>
		</view>

		<!-- 设置wx:for循环 -->
		<view class="content_1" v-for="(item, index) in items" :key="item.id" @click='showDetail(item)'>

			<view class="view_3_1">
				<text class="mycard text-xl text-bold text-blue"> {{item.gmtCreate.substring(8,10)}} </text>
				<text class="img_icon_small_1">{{item.gmtCreate.substring(5,7)}} </text>
			</view>

			<view class="content">

				<view class="cu-bar ">
					<view class="action sub-title">
						<text class="text-xl text-bold text-blue">{{item.taskTitle}}</text>
						<text class="text-ABC text-blue">Personal</text>
					</view>
				</view>

				<view class="view_3">
					<text>{{item.taskTime.substring(0,5)}}</text>
				</view>
				<!-- 弹框 -->
				<u-toast ref="uToast"></u-toast>
				<view class="view_3_2">
					<text>标签</text>
					<view>
						<image class="img_icon_small" src="../../static/imags/tabar.png" @tap.stop="clickImage(item)">
						</image>
						<!-- 设置title的时候会有x号 -->
						<u-action-sheet :description="title" :show="show2" @close="show2 = false" :actions="actions2"
							cancelText="取消" @select="selectClick">
						</u-action-sheet>
					</view>
				</view>

			</view>
		</view>

		<!-- 将小球暴露出去成为要给组件 -->
		<movable-area class="movable-area">
			<movable-view class="movable-view" direction="all">
				<view class="footer cu-btn bg-blue round  shadow" @click="toCreateTask">
					<view class="myfooter">+</view>
					<view class="myfooter">新建</view>
				</view>
			</movable-view>
		</movable-area>
	</view>
</template>

<script scoped>
	export default {
		data() {
			return {
				show: false,
				title: '',
				items: [

				],
				show2: false,
				value2: 0,
				notDone: 3,
				Done: 2,
				keyword: '',
				myItem: '',
				list1: [{
						name: '次要'
					},
					{
						name: '重要'
					}
				],
				actions2: [{
						name: '编辑',
					},
					{
						name: '删除',
					}
				],

			}
		},

		onLoad(options) {
			console.log("我是onLoad方法，我被调用了")
			//保存，关于箭头函数的bug
			let that = this
			wx.cloud.init();
			//这里加载数据
			//不用跳转了，直接发送接口
			wx.cloud.callContainer({
				config: {
					env: "prod-9gaetadn0414eb27"
				},
				path: '/memo/taskRemind/searchAllTask',
				header: {
					"X-WX-SERVICE": "springboot-memo",
					"content-type": "application/json",
					'token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzY3NDA5MTQxNjc1MDEyMDk5IiwiaWF0IjoxNjUwNjMyNTMwLCJleHAiOjE2NTEzMzI1MzB9.BSxn3DP0HrfZigfNHWjfTFCXW-M6yEYoBDBE9W1TlqU' //自定义请求头信息
				},
				method: "GET",
				success(res) {
					//连续解构赋值
					console.log("我是that", typeof that)
					let {
						data: {
							data: data
						}
					} = res
					console.log(res)
					that.items = data
				},
				fail(error) {
					console.log('失败', error)
				}
			})

		},

		methods: {
			doSearch() {
				//执行查询的内容，拿到keyword
				//保存，关于箭头函数的bug
				let that = this
				uni.request({
					url: `https://springboot-memo-1629736-1309688330.ap-shanghai.run.tcloudbase.com/memo/taskRemind/searchTask/${that.keyword}`, //仅为示例，并非真实接口地址。
					data: {

					},
					method: 'GET',
					header: {
						"content-type": "application/json",
						'token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzY3NDA5MTQxNjc1MDEyMDk5IiwiaWF0IjoxNjUwNjMyNTMwLCJleHAiOjE2NTEzMzI1MzB9.BSxn3DP0HrfZigfNHWjfTFCXW-M6yEYoBDBE9W1TlqU' //自定义请求头信息
					},
					success: (res) => {
						let {
							data: {
								data: data
							}
						} = res
						console.log(res)
						that.items = data
					},
					fail(error) {
						console.log('失败', error)
					}
				});
			},

			click1(e) {
				console.log("我是click1,我被点击了")
				console.log('click1', e);
			},

			clickImage(e) {
				this.title = e.taskTitle
				this.show2 = true;
				this.myItem = e
			},

			showDetail(e) {
				//不能用于tabBar页面
				//传送对象使用JSON格式
				console.log("我是详情页", e.id)
				let obj = JSON.stringify(e)
				wx.navigateTo({
					url: '../../page_taskDetails/taskDetails/taskDetails?obj=' + encodeURIComponent(obj)
				})

			},

			toCreateTask(e) {
				//不能用于tabBar页面
				console.log("我是创建页")
				wx.navigateTo({
					url: "../../page_createTask/createTask/createTask"
				})

			},

			selectClick(index) {
				let that = this
				console.log("index是 ", index)
				if (index.name === '编辑') {
					let obj = JSON.stringify(that.myItem)
					//进行相应页面跳转
					wx.navigateTo({
						url: "../../page_createTask/createTask/createTask?obj=" + encodeURIComponent(obj)
					})

				} else if (index.name === '删除') {
					//弹框
					wx.cloud.callContainer({
						config: {
							env: "prod-9gaetadn0414eb27"
						},
						path: `/memo/taskRemind/deleteTask/${that.myItem.id}`,
						header: {
							"X-WX-SERVICE": "springboot-memo",
							"content-type": "application/json",
							'token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzY3NDA5MTQxNjc1MDEyMDk5IiwiaWF0IjoxNjUwNjMyNTMwLCJleHAiOjE2NTEzMzI1MzB9.BSxn3DP0HrfZigfNHWjfTFCXW-M6yEYoBDBE9W1TlqU' //自定义请求头信息
						},
						method: "DELETE",
						success(res) {
							//这里有多个vm实例
							that.$refs.uToast[0].show({
								type: 'success',
								title: '成功主题(带图标)',
								message: "删除成功",
								complete() {
									console.log("我删除成功了")
								}
							})
							console.log(res)
							//成功之后，动态刷新数据
							wx.cloud.callContainer({
								config: {
									env: "prod-9gaetadn0414eb27"
								},
								path: '/memo/taskRemind/searchAllTask',
								header: {
									"X-WX-SERVICE": "springboot-memo",
									"content-type": "application/json",
									'token': 'eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiIxMzY3NDA5MTQxNjc1MDEyMDk5IiwiaWF0IjoxNjUwNjMyNTMwLCJleHAiOjE2NTEzMzI1MzB9.BSxn3DP0HrfZigfNHWjfTFCXW-M6yEYoBDBE9W1TlqU' //自定义请求头信息
								},
								method: "GET",
								success(res) {
									//连续解构赋值
									console.log("我是that", typeof that)
									let {
										data: {
											data: data
										}
									} = res
									console.log(res)
									that.items = data
								},
								fail(error) {
									console.log('失败', error)
								}
							})

						},
						fail(error) {
							console.log('失败', error)
						}


					})
				} else if (index.name === '') {

				}

			}


		}
	}
</script>

<style lang="scss">
	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(98, 100, 97);
		font-size: 30upx;
		margin-top: 20upx;
	}

	.view_3_1 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		//让水平居中
		text-align: center;
		margin: 20upx 0upx;
		margin-left: 20upx;
		padding-right: 0upx;
		background-color: #FFFFFF;
		width: 4000rpx;
		border-radius: 15upx;
	}

	// 全部的大盒子
	.content_1 {
		display: flex;
		flex-direction: row;
		margin: 10upx;
		padding-right: 0upx;
		z-index: 50;
	}

	.mycard {
		margin-top: 20upx;
	}

	.content {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		margin: 20upx;
		margin-left: 6upx;
		padding-left: 0upx;
		width: 600rpx;
		border-radius: 15upx;
	}

	.view_3 {
		padding-left: 40rpx;
		width: 100vw;
		height: 60upx;
	}

	.img_icon_small {
		width: 25upx;
		height: 20upx;
		margin-top: 17rpx;
		margin-left: 450rpx;
		z-index: 100;
	}

	.view_3_2 {
		display: flex;
		flex-direction: row;
		padding-left: 40rpx;
		width: 100vw;
		height: 60upx;
	}

	.footer {
		display: flex;
		flex-direction: column;
		width: 90rpx;
		height: 90rpx;
		bottom: 40rpx;
		margin-left: 45%;
	}


	.myfooter {
		font-size: 30rpx;

	}

	.serch_board {
		margin-left: 50upx;
		width: 85vw;
		color: blue($color: #000000);
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}


	.movable-area {
		pointer-events: none; // 这个属性设置为none,让所有事件穿透过去
		z-index: 100;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	// 设置可以活动的范围
	.movable-view {
		pointer-events: auto; // 重设为auto,覆盖父属性设置
		height: 80rpx;
		width: 100rpx;
		top: 85%;
		left: 40%;
	}

	.cell-page {
		padding-bottom: 20px;
	}

	.cell-box {
		&__title {
			font-size: 14px;
			color: rgb(143, 156, 162);
			margin: 20px 0px 0px 15px;
		}

		&__block {
			// background-color: #fff;
			margin-top: 20px;
		}
	}

	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-slot-title {
		@include flex;
		flex-direction: row;
		align-items: center;
	}

	.u-cell-text {
		font-size: 15px;
		line-height: 22px;
		color: #303133;
		margin-right: 5px;
	}

	.u-slot-value {
		line-height: 17px;
		text-align: center;
		font-size: 10px;
		padding: 0 5px;
		height: 17px;
		color: #FFFFFF;
		border-radius: 100px;
		background-color: #f56c6c;
	}
</style>
